<template>
  <footer :style="{ backgroundColor: bgColor }">
    <p>
      Created with <i class="fa fa-heart"></i> by
      <a target="_blank" :href="gitee">{{ author }}</a>
      - Read how I created this and how you can join the challenge
      <a target="_blank" :href="gitee">here Gitee</a>.
    </p>
  </footer>
</template>

<script setup lang="ts">
// 接口
interface FooterProps {
    // 作者
    author?: string,
    // 账号 
    gitee?: string,
    // 底部颜色
    bgColor?: string
}
// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<FooterProps>(), {
    author: 'Eternity',
    gitee: 'https://gitee.com/cbxiaochen',
    bgColor: 'rgba(35, 36, 35, 0.9)'
})
</script>

<style lang="scss" scoped>
footer {
  color: #fff;
  font-size: 14px;
  bottom: 0;
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 999;
}

footer p {
  margin: 10px 0;
}

footer i {
  color: red;
}

footer a {
  // color: #3c97bf;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
</style>
